<template>
	<div class="relative flex justify-center items-center w-20 h-20">
		<BaseImage class="absolute" src="loading-circle-a.svg" />
		<BaseImage class="absolute loading-circle" src="loading-circle-b.svg" />
		<BaseImage class="absolute" src="loading-circle-c.svg" />
	</div>
</template>

<script setup lang="ts">
import BaseImage from '@/components/base/image/index.vue'
</script>

<style scoped lang="scss">
:deep(.loading-circle) {
	color: red;
	animation: loading-circle 1.5s infinite linear;
}

@keyframes loading-circle {
	0% {
		transform: rotate(0deg);
		animation-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6);
	}
	66.66% {
		transform: rotate(360deg); /* 完成旋转 */
	}
	66.67%,
	100% {
		/* 保持最后一帧实现 0.5s 间隔 */
		transform: rotate(360deg);
		animation-timing-function: linear;
	}
}
</style>
